<template>
  <div class="navbar">
    <!-- <div class="hamburger-container">
      <i :class="{ 'el-icon-s-fold': isCollapse, 'el-icon-s-unfold': !isCollapse }" class="hamburger" @click="toggleSideBar"></i>
    </div> -->
    <svg-icon icon-class="dashboard" class-name="disabled" />
    <!-- 面包屑 -->
    <!-- <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbList" :key="breadcrumb.index">{{breadcrumb.name}}</el-breadcrumb-item>
    </el-breadcrumb> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      // 面包屑list
      breadcrumbList:null,
    }
  },
  computed: {
    ...mapState({
      // 是否展开判断
      isCollapse: state => !state.layout.sidebar.opened
    }),
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化
    init(){
      let self = this;
      // 初始化面包屑
      self.breadcrumbList = self.$route.matched.map(val => {
        return {
          "name": (val && val.meta) ? val.meta.title : null,
          "index": val.index
        }
      });
    },
    // 展开切换
    toggleSideBar() {
      this.$store.dispatch('toggleSideBar')
    },
  },
}
</script>


<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container{
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;

    .hamburger{
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }
  }

  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
}
</style>